/**
 * @author:linjiye
 * @date:2025/1/6
 * @desc:
 **/

import {ImageBackground, StyleSheet, Text, TouchableOpacity, View,Image} from 'react-native'
import React, {useEffect, useState} from 'react'
import TabCard from "@/components/TabCard";
import PageFormBtn from "@/components/PageFormBtn";
import {useRouter} from "expo-router";
import PageScrollView from "@/components/PageScrollView";
import PageTabBar from "@/components/PageTabBar";
import ContentFeed from "@/components/aiFeeding/ContentFeed";
import FileFeed from "@/components/aiFeeding/FileFeed";
import {useDispatch, useSelector} from "react-redux";
import {
    useExpansionMutation,
    useGetMaxFilesQuery,
    useGetProductUsageQuery,
    useGetRateFromCodeQuery
} from "@/store/api/aiFeeding/aiFeedingApi";
import FcButton from "@/components/FcButton";
import KeywordHighlighter from "@/components/KeywordHighlighter";
import FcModal from "@/components/FcModal";
import FormTitle from "@/components/FormTitle";
import {Flex, Stepper, Toast} from "@ant-design/react-native";
import FcTextInput from "@/components/FcTextInput";
import FcSlider from "@/components/FcSlider";

type Props = {}

const dilatation = (props: Props) => {
    const [isAdd,setIsAdd] = useState(false)
    const [tapName,setTapName] = useState('')
    const [isHint,setIsHint] = useState(false)
    const [interspace,setInterspace] = useState(2142.68)
    const [list,setList] = useState([
        {
            num: 1190,
            id: 1,
            count: 1000
        },{
            num: 5950,
            id: 2,
            count: 5000
        },{
            num: 11900,
            id: 3,
            count: 10000
        },{
            num: 1190,
            id: 4,
            count: 1000,
            type: 'oneself'
        }
    ])
    const [selectItem,setSelectItem] = useState(list[0])
    const [oneself,setOneself] = useState(false)
    const [topUp,setTopUp] = useState(false)
    const [maxFiles,setMaxFiles] = useState([])
    const [productUsage,setProductUsage] = useState({})
    const [payItem,setPayItem] = useState({
        count: 1,
        money: 0.1,
    })

    const router = useRouter();

    const dispatch = useDispatch();

    const {data:maxFilesData,isSuccess:maxFilesSuccess} = useGetMaxFilesQuery()
    const {data:productUsageData,isSuccess:productUsageSuccess} = useGetProductUsageQuery({
        productUsageType: 'SCORE',
    })
    const [expansionFun] = useExpansionMutation()


    // const d = useSelector(state => state.aiFeeding.selectFileData)


    useEffect(() => {
        if(maxFilesData){
            if(maxFilesData?.code === 200){
                let strArr = maxFilesData?.result?.split('/')
                setMaxFiles([strArr[0]*1,strArr[1]*1])
            }
        }

        if(productUsageData){
            console.log(productUsageData,'productUsageData');
            if(productUsageData?.code === 200){
                setProductUsage(productUsageData?.result || {})
            }
        }
    }, [maxFilesData,maxFilesSuccess,productUsageData,productUsageSuccess]);

    const pageBottom = (
        <View style={styles.bottom_btn_box}>
            <View style={styles.bottom_btn}>
                <View style={styles.count_wrap}>
                    <Text style={styles.count}>{selectItem?.num}</Text>
                    <Text style={styles.count_txt}>个点数</Text>
                </View>
                <View style={{flex: 1, marginLeft: 4}}>
                    <FcButton
                        onClick={() => handleAccount()}
                        type='BjJB'
                        colors={['#6989FF', '#C65EFD']}
                        style={{width: '100%', height: 40, justifyContent: 'center'}}
                        itemStyle={{borderRadius: 8, fontSize: 15}}
                        textName='结算'/>
                </View>
            </View>
        </View>
    )

    const handleSelectItem = (val) => {
        setSelectItem(val)
        if(val.type === 'oneself') setOneself(true)
    }

    function handleAccount() {
        console.log(selectItem);
        setIsHint(true)
    }

    function takeSure() {
        setIsHint(false)
        expansionFun({
            num: selectItem?.count / 1000,
        }).then(res => {
            if(res?.data?.code === 200){
                Toast.info('扩容成功')
                setOneself(false)
            }
        })
    }

    function handleWxPay() {

    }

    return (
        <PageScrollView
            isTransparentTab
            bodyStyle={{paddingBottom: 0,paddingHorizontal: 0}}
            pageTab={
                <PageTabBar
                    style={{marginVertical: 10}}
                    title='空间扩容'
                />
            }
            pageBottom={pageBottom}
        >
            <View style={styles.container}>
                <View style={styles.card_wrap}>
                    <ImageBackground
                        style={styles.card_bg}
                        source={require('@/assets/images/aiFeeding/card_bg.png')}
                        resizeMode={'cover'}
                    >
                        <View style={styles.card_content}>
                            <Text style={styles.card_txt}>我的空间</Text>
                            <FcSlider
                                value={maxFiles[0]}
                                thumbTintColor='transparent'
                                thumbImage={''}
                                disabled
                                min={0}
                                max={maxFiles[1]}
                                trackTintColor='#B5AFFC'
                                colors= {['white', 'white']}
                                onFcSlider={setInterspace} >
                                <View style={styles.interspace_wrap}>
                                    <View style={styles.interspace_box}>
                                        <Text style={styles.interspace_icon}></Text>
                                        <Text style={styles.interspace_txt}>总容量{maxFiles[1]}M</Text>
                                    </View>
                                    <View style={styles.interspace_box}>
                                        <Text style={[styles.interspace_icon,{backgroundColor: 'white'}]}></Text>
                                        <Text style={[styles.interspace_txt,{color: 'white'}]}>已使用{maxFiles[0]}M</Text>
                                    </View>
                                </View>
                            </FcSlider>
                            <FormTitle style={styles.slider} title='算力点数余额' titleStyle={{color: 'white'}} right={
                                <TouchableOpacity style={{flexDirection: 'row',alignItems:'center'}} onPress={() => setTopUp(true)}>
                                    <Text style={{color: 'white'}}>去充值</Text>
                                    <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'white'}}>&#xe609;</Text>
                                </TouchableOpacity>}/>
                            <Text style={styles.dilatation_txt}>{productUsage.usableUsage}</Text>
                        </View>
                        <Image style={styles.logo} source={require('@/assets/images/logo.png')} resizeMode={'center'}></Image>
                    </ImageBackground>
                </View>
                <FormTitle style={{paddingHorizontal: 16,paddingTop: 24}} isLeftIcon title='充值扩容'/>
                <Text style={styles.hint}>1RMB=10个算力点数，1000个算力点数起充</Text>
                <Flex wrap='wrap' style={styles.list_wrap}>
                    {list?.map((item, index) =>
                        <View style={styles.list_box} key={index}>
                            <TouchableOpacity style={[styles.list,item.id === selectItem?.id && styles.list_active]} key={index} onPress={() => handleSelectItem(item)}>
                                <Text style={styles.list_count}>{item.type === 'oneself' ? '自定义' :  item.count+'M'}</Text>
                                <Text style={styles.list_desc}>{item.type === 'oneself' ? '充值扩容' :  `${item.num}个算力点数/年`}</Text>
                            </TouchableOpacity>
                        </View>
                    )}
                </Flex>
                <Text style={styles.hint}><Text style={{color: 'red'}}>*</Text>线下付款结算，请联系售后人员付款</Text>
            </View>



            <FcModal
                isOpen={oneself}
                onFcModalClose={() => setOneself(false)}
                titleText='自定义充值扩容'
                titleDesc='1RMB=10个算力点数，1000个算力点数起充'
                bottom={pageBottom }
            >
                <View style={styles.top_up}>
                    <Text style={{color: 'rgba(0, 0, 0, 0.9)',fontSize: 15}}>充值算力点数</Text>
                    <Stepper
                        style={styles.stepper}
                        inputStyle={styles.inputStyle}
                        defaultValue={1000}
                        min={1000}
                        step={1000}
                        formatter={(value) => `${value}M`}
                        parser={(text) => parseFloat(text.replace('M', ''))}
                        onChange={(value) => {
                            console.log(value, typeof value)
                            let obj = {
                                ...selectItem,
                                num: value/1000 * 1190,
                                count: value,
                            }
                            setSelectItem(obj)
                        }}
                    />
                </View>
            </FcModal>

            <FcModal
                isOpen={topUp}
                onFcModalClose={() => setTopUp(false)}
                titleText='充值算力点数'
                titleDesc='1RMB=10个算力点数，1000个算力点数起充'
                bottom={
                    <View style={styles.bottom_btn_box}>
                        <View style={styles.bottom_btn}>
                            <View style={styles.count_wrap}>
                                <Text style={[styles.count_txt,{marginLeft: 0,marginRight: 4}]}>应付¥</Text>
                                <Text style={styles.count}>{payItem.money}</Text>
                            </View>
                            <TouchableOpacity style={{flex: 1, marginLeft: 4}} onPress={() => handleWxPay()}>
                                <FcButton
                                    type='BjJB'
                                    colors={['#6989FF', '#C65EFD']}
                                    style={{width: '100%', height: 40, justifyContent: 'center'}}
                                    itemStyle={{borderRadius: 8, fontSize: 15}}
                                    textName='微信支付'/>
                            </TouchableOpacity>
                        </View>
                    </View>
                }
            >
                <View style={styles.top_up}>
                    <Text style={{color: 'rgba(0, 0, 0, 0.9)',fontSize: 15}}>充值算力点数</Text>
                    <Stepper
                        style={styles.stepper}
                        inputStyle={styles.inputStyle}
                        defaultValue={payItem.count}
                        min={1}
                        step={1}
                        onChange={(value) => {
                            console.log(value, typeof value)
                            let obj = {
                                ...payItem,
                                count: value,
                                money: (value * 0.1).toFixed(1),
                            }
                            setPayItem(obj)
                        }}
                    />
                </View>
            </FcModal>

            <FcModal
                isOpen={isAdd}
                transparent
                closeShow={false}
                animationType='fade'
                onFcModalClose={() => setIsAdd(false)}
                style={styles.modal_default}
                titleText={'新增标签'}
                titleDesc={'1RMB=10个算力点数，1000个算力点数起充'}
                footer={[
                    {
                        text: '取消',
                        onPress: () => setIsAdd(false),
                        style: { color: 'rgba(0, 0, 0, 0.5)',fontSize: 17 },
                    },
                    {
                        text: '确认',
                        onPress: () => setIsAdd(false),
                        style: { color: '#2856FF',fontSize: 17 },
                    },
                ]}
            >
                <View style={{paddingBottom: 20}}>
                    <FcTextInput multiline text={tapName} placeholder={'请输入标签名称'}
                                 onChangeText={setTapName}
                                 height={82}/>
                </View>
            </FcModal>
            <FcModal
                isOpen={isHint}
                transparent
                closeShow={false}
                animationType='fade'
                onFcModalClose={() => setIsHint(false)}
                style={styles.modal_default}
                titleText='确认要结算吗？'
                titleBottomBorderWidth={0}
                footer={[
                    {
                        text: '取消',
                        onPress: () => setIsHint(false),
                        style: { color: 'rgba(0, 0, 0, 0.5)',fontSize: 17 },
                    },
                    {
                        text: '确认',
                        onPress: () => takeSure(),
                        style: { color: '#2856FF',fontSize: 17 },
                    },
                ]}
            >
                <View style={styles.hint_wrap}>
                    <Text style={styles.hint_txt}>本次将扩容</Text>
                    <Text style={[styles.hint_txt,{color: '#FA5151'}]}>{selectItem.count}M</Text>
                    <Text style={styles.hint_txt}>，扣除</Text>
                    <Text style={[styles.hint_txt,{color: '#FA5151'}]}>{selectItem.num}个点数</Text>
                </View>
            </FcModal>
        </PageScrollView>
    )
}

export default dilatation

const styles = StyleSheet.create({
    container: {
        // backgroundColor: 'white',
        // paddingHorizontal: 16,
        // paddingBottom: 16
    },
    page_bottom: {
        backgroundColor: 'white',
        height: 48,
        paddingHorizontal: 16,
        position: "relative",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between"
    },
    btn_item: {
        fontSize: 14,
        color: 'rgba(0,0,0,0.3)',
        flexDirection: "row",
        alignItems: "center",
    },
    btn_icon: {
        fontFamily: 'FcIconFont',
        fontSize: 14,
        color: 'rgba(0,0,0,0.3)'
    },
    btn_txt: {
        color: 'rgba(0,0,0,0.9)'
    },
    delete_text: {
        fontFamily: 'FcIconFont',
        fontSize: 14,
        color: 'rgba(250,81,81,0.3)'
    },
    delete_active: {
        color: 'rgba(250,81,81,1)'
    },

    tap_bottom: {
        backgroundColor: 'white',
        height: 48,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: 16
    },
    item_wrap: {
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "space-between",
        minHeight: 56,
        display: 'flex',
        borderBottomWidth: 1,
        borderBottomColor: 'rgba(0,0,0,0.1)',
    },
    item_left: {
        flexDirection: 'row',
        alignItems: "center"
    },
    select_icon: {
        width: 20,
        height: 20,
        borderRadius: '50%',
        borderWidth: 1,
        borderColor: 'rgba(0,0,0,0.5)',
        marginRight: 12,
    },
    select_active: {
        borderColor: '#2856FF',
        backgroundColor: '#2856FF',
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "center"
    },
    search_text: {
        color: 'rgba(0, 0, 0, 0.9)'
    },
    edit: {
        color: '#2856FF',
        paddingHorizontal: 12,
        height: 32,
        display: 'flex',
        alignItems: 'center',
        borderRadius: 8,
        backgroundColor: '#F1F2F4'
    },
    modal_default: {
        width: 280,
        borderBottomRightRadius: 12,
        borderBottomLeftRadius: 12,
    },
    bottom_btn_box: {
        height: 72,
        backgroundColor: 'white',
    },
    bottom_btn: {
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: 16,
        height: 56,
        justifyContent: "space-between",
        backgroundColor: 'white',
    },
    count_wrap: {
        flex: 1,
        flexDirection: "row",
        alignItems: "center",
    },
    count: {
        fontSize: 22,
        color: '#FA5151',
        fontWeight: 500
    },
    count_txt: {
        marginLeft: 4,
        fontSize: 12,
        color: 'rgba(0,0,0,0.9)'
    },
    card_wrap: {
        marginHorizontal: 16,
        height: 195,
        // flex: 1,
        position: "relative"
    },
    card_content: {
      padding: 16,
      width: '100%',
      height: '100%',
      position: 'absolute',
      top: 0,
      left: 0,
      zIndex: 10
    },
    card_bg: {
        height: 195,
        width: '100%',
        borderRadius: 8,
        overflow: "hidden"
    },
    card_txt: {
        color: 'white',
        fontSize: 15,
        paddingBottom: 12
    },
    interspace_wrap: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: "space-between"
    },
    interspace_box: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 8
    },
    interspace_icon: {
        width: 10,
        height: 10,
        backgroundColor: 'rgba(255,255,255,0.3)',
        borderRadius: 2,
        marginRight:2
    },
    interspace_txt: {
        fontSize: 12,
        color: 'white'
    },
    slider: {
        paddingTop: 20,
        borderTopWidth: 0.5,
        borderTopColor: 'rgba(255,255,255,0.3)',
        marginTop: 16
    },
    dilatation_txt: {
        color: 'white',
        fontSize: 22,
        fontWeight: 'bold',
        lineHeight: 34,
    },
    logo: {
        width: 162,
        height: 162,
        position: "absolute",
        right: -30,
        bottom: -50
    },
    hint: {
        color: 'rgba(0,0,0,0.3)',
        fontSize: 12,
        paddingBottom: 16,
        paddingHorizontal: 16
    },
    list_wrap: {
        marginHorizontal: 12,
    },
    list_box: {
        width: '50%',
        height: 126,
    },
    list: {
        flex: 1,
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        borderRadius: 8,
        backgroundColor: 'white',
        marginHorizontal: 4,
        marginBottom: 8,
        borderWidth: 1,
        borderColor: 'white'
    },
    list_active: {
      borderColor: '#2856FF'
    },
    list_count: {
        fontSize: 22,
        fontWeight: 'bold',
        lineHeight: 36,
        color: '#2856FF'
    },
    list_desc: {
        fontSize: 14,
        lineHeight: 22,
        color: 'rgba(0, 0, 0, 0.5)'
    },
    top_up: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: 16,
        paddingVertical: 40
    },
    stepper: {
        color: '#2856FF',
        fontWeight: 'bold',
        width: 180
    },
    inputStyle: {
        color: '#2856FF',
        fontWeight: 'bold',
        // width: 108,
        // height: 40
        backgroundColor: '#F1F2F4',
        fontSize: 24,
        borderRadius: 8,
        paddingHorizontal: 10
    },
    hint_wrap: {
        textAlign: 'center',
        flexWrap: 'wrap',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    hint_txt: {
        fontSize: 14,
        lineHeight: 36,
        color: 'rgba(0, 0, 0, 0.5)',
    }
})